<template>
  <div id="grade">
    <div ref="boxRef" class="box"></div>
    <div class="notFound" v-if="isNull">
      <span>该学生未参加考试</span>
    </div>
  </div>
</template>

<script>
import {getCurrentInstance, onMounted, reactive, ref} from "vue";
import {useRoute} from "vue-router/dist/vue-router";

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "grade",
  setup(){
    const route = useRoute()
    const {proxy} = getCurrentInstance()
    let boxRef = ref(null)
    let isNull = ref(false)
    let data = reactive({
      dataX: [],
      dataY: []
    })
    onMounted(()=>{
      getExamInfo()
    })
    function getExamInfo(){
      proxy.$axios.get(
          // eslint-disable-next-line no-undef
          `/manage/score/${route.query.id}`
      ).then(
          response => {
            if (response.data.length === 0){
              isNull.value = true
            }else {
              response.data.forEach((item)=>{
                data.dataX.push(item.subject)
                if (item.score < 60){
                  data.dataY.push({
                    value: item.score,
                        itemStyle: {
                          color: '#a90000'
                        }
                  })
                }else {
                  data.dataY.push({
                    value: item.score,
                  })
                }
              })
              let scoreCharts = proxy.$echarts.init(proxy.$refs.boxRef);
              let option = {
                title: {
                  text: '滑动滚轮缩放查看',
                  subtext: '红色表示不及格，蓝色表示及格'
                },
                xAxis: {
                  type: 'category',
                  data: data.dataX,
                  axisTick: {
                    show: false
                  },
                  axisLine: {
                    show: false
                  },
                  z: 10
                },
                yAxis: {
                  type: 'value',
                  axisLine: {
                    show: false
                  },
                  axisTick: {
                    show: false
                  },
                  axisLabel: {
                    color: '#999'
                  }
                },
                dataZoom: [
                  {
                    type: 'inside'
                  }
                ],
                series: [
                  {
                    type: 'bar',
                    showBackground: true,
                    itemStyle: {
                      color: new proxy.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: '#83bff6' },
                        { offset: 0.5, color: '#188df0' },
                        { offset: 1, color: '#188df0' }
                      ])
                    },
                    emphasis: {
                      itemStyle: {
                        color: new proxy.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                          { offset: 0, color: '#2378f7' },
                          { offset: 0.7, color: '#2378f7' },
                          { offset: 1, color: '#83bff6' }
                        ])
                      }
                    },
                    data: data.dataY
                  }
                ]
              }
              scoreCharts.setOption(option);
              /*const zoomSize = 6;
              scoreCharts.on('click', function (params) {
                console.log(data.dataX[Math.max(params.dataIndex - zoomSize / 2, 0)]);
                console.log(data.dataX[Math.min(params.dataIndex + zoomSize / 2, data.dataY.length - 1)]);
                scoreCharts.dispatchAction({
                  type: 'dataZoom',
                  startValue: data.dataX[Math.max(params.dataIndex - zoomSize / 2, 0)],
                  endValue:
                      data.dataX[Math.min(params.dataIndex + zoomSize / 2, data.dataY.length - 1)]
                });
              });*/
            }
          },
          error => {
            console.log('请求失败', error.message)
          }
      )
    }
    return{
      boxRef,
      isNull
    }
  }
}
</script>

<style scoped>
#grade {
  position: relative;
}

#grade .box {
  width: 600px;
  height: 400px;
}

#grade .notFound {
  position: absolute;
  top: 0px;
  left: 0px;
}

</style>